<template>
    <div>
      <MyHeader/>
      <router-view></router-view>
      <MyCard class="MyCard"/>
      <MyFooter/>
    </div>
</template>

<script>
import MyHeader from './components/MyHeader';
import MyCard from './components/MeCard'
import MyFooter from './components/MyFooter';
  export default {
    name: 'App',
    components:{
      MyHeader,
      MyFooter,
      MyCard
    }
  }
</script>

<style>
.c{
  width: 100px;
  height: 100px;
  background-color: red;
}
.m-box{
    background-color: white;
    padding:1% 5% 1% 5%;
    margin-top: 3%;
}
.m-wudaohang-box{
    padding:1% 5% 1% 5%;
    margin-top: 7%;
    margin-left: 8%;
    margin-right: 8%; 
    
}
.m-wudaohang-xbox{
  background-color: white;
  margin-bottom: 3%;
}
.box{
        background-color: rgb(246, 238, 244);
        /* position: relative; */
        margin-top: 7%;
        margin-bottom: 3%;
        margin-left: 8%;
        height: 500px;
        float: left;
        width:60%
}
.MyCard{
  background-color: rgb(246, 238, 244);
  /* position: relative; */
  margin-top: 7%;
  margin-bottom: 3%;
  height: 500px;
  float: left;
  width: 20%;
  margin-left: 4%;  
  text-align: center;
}

  body{
        font-size: 14px;
        background-color: rgb(246, 226, 241);
        font-family: "PingFang SC","Microsoft YaHei","微软雅黑",Arial;
        opacity:0.8;
        line-height: 40px;
  }
  *{
    margin: 0;
    padding: 0;
  }
  hr{
        margin-top: 10px;
        width: 80%;
        margin-left: 10%;
    }
  /* 字体 */
  .m-title{
      font-size:larger;
      font-family: STSong
  }

  /* 阴影 */
  .shadow-drop-2-center {
	-webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}
</style>
